<!--
 * @Author: your name
 * @Date: 2021-02-01 10:13:09
 * @LastEditTime: 2021-02-05 12:52:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /shb-fe-pc/src/modules/task/view/components/TaskFeedback/FeedbackDetailBoLi.vue
-->
<template>
  <div class="task-feedback-detail">
    <div class="form-view-row">
      <label>{{$t('task.detail.components.serviceDegree')}}</label>
      <div class="star-evaluate-row" >
        <base-service-star :value="getStar()"></base-service-star>
      </div>
    </div>
    <div class="form-view-row">
      <label>{{$t('task.detail.components.serviceAttitude')}}</label>
      <div class="star-evaluate-row-content">
        <label class="degree-item" v-for="item in degreeOption" :key="item.value">
          <input type="radio" class="hidden" name="boliServiceAttitude" :value="item.value" v-model="baseEvaluateInfo.boliServiceAttitude" :disabled="true" />
          <span :class="['evaluate-degree-img', getDegreeImg(item.value, baseEvaluateInfo.boliServiceAttitude == item.value)]"></span>
          <span class="degree-text">{{ item.label }}</span>
        </label>
      </div>
    </div>
    <div class="form-view-row">
      <label>{{$t('task.detail.components.repairResults')}}</label>
      <div class="star-evaluate-row-content">
        <label class="degree-item" v-for="item in degreeOption" :key="item.value">
          <input type="radio" class="hidden" name="boliMaintenanceResults" :value="item.value" v-model="baseEvaluateInfo.boliMaintenanceResults" :disabled="true" />
          <span :class="['evaluate-degree-img', getDegreeImg(item.value, baseEvaluateInfo.boliMaintenanceResults == item.value)]"></span>
          <span class="degree-text">{{ item.label }}</span>
        </label>
      </div>
    </div>
    <div class="form-view-row">
      <label>{{$t('task.detail.components.isInTime')}}</label>
      <div class="star-evaluate-row-content">
        <label class="degree-item" v-for="item in degreeOption" :key="item.value">
          <input type="radio" class="hidden" name="boliOnTime" :value="item" v-model="baseEvaluateInfo.boliOnTime" :disabled="true" />
          <span :class="['evaluate-degree-img', getDegreeImg(item.value, baseEvaluateInfo.boliOnTime == item.value)]"></span>
          <span class="degree-text">{{ item.label }}</span>
        </label>
      </div>
    </div>
    <div class="form-view-row" v-if="evaluateConfig.useTagEvaluate && tagEvaluates.length">
      <label>{{$t('task.detail.components.serviceTag')}}</label>
      <div class="form-view-row-content evaluate-tag">
        <span class="evaliate-tag-item evaliate-tag-active" v-for="name in tagEvaluates" :key="name">{{ name }}</span>
      </div>
    </div>
    <div class="form-view-row">
      <label>{{$t('task.customerEvaluation')}}</label>
      <div class="form-view-row-content" v-if="evaluateContent">{{ evaluateContent }}</div>
    </div>

    <template v-if="evaluate.isReview === 0">
      <div class="form-view-row" v-if="evaluate.reviewUser">
        <label>{{$t('task.detail.components.evaluatePerson')}}</label>
        <div class="form-view-row-content">{{ evaluate.reviewUser.displayName }}</div>
      </div>
      <div class="form-view-row" v-if="evaluate.reviewTime">
        <label>{{$t('task.detail.components.evaluateTime')}}</label>
        <div class="form-view-row-content">{{ evaluate.reviewTime | fmt_datetime }}</div>
      </div>
    </template>

    <div class="form-view-row">
      <label>{{$t('task.detail.components.evaluateSuggestion')}}</label>
      <div class="form-view-row-content" v-if="evaluate.suggestion">{{ evaluate.suggestion }}</div>
    </div>

    <template v-if="evaluate.isReview === 1">
      <div class="form-view-row" v-if="evaluate.reviewUser">
        <label>{{$t('task.detail.components.reviewUser')}}</label>
        <div class="form-view-row-content">{{ evaluate.reviewUser.displayName }}</div>
      </div>
      <div class="form-view-row" v-if="evaluate.reviewTime">
        <label>{{$t('task.detail.components.reviewTime')}}</label>
        <div class="form-view-row-content">{{ evaluate.reviewTime | fmt_datetime }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'task-feedback-detail-boli',
  props: {
    evaluate: {
      type: Object,
      default: () => ({})
    },
    evaluateContent: {
      type: String,
      default: ''
    },
    taskEvaluate:{
      type:Object,
      default: () => ({})
    },
    evaluateConfig: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      // TODO 国际化待办 value参数为中文
      degreeOption: [{
        value: '满意',
        label: this.$t('task.detail.components.satisfied')
      }, {
        value: '不满意',
        label: this.$t('task.detail.components.dissatisfied')
      }],
    };
  },
  computed:{
    baseEvaluateInfo(){
      return this.taskEvaluate ? this.taskEvaluate?.attribute : this.evaluate.baseEvaluateInfo?.attribute
    },
    tagEvaluates(){
      return (this.taskEvaluate ? this.taskEvaluate?.attribute.tagEvaluates : this.evaluate.baseEvaluateInfo?.attribute.tagEvaluates) || []
    }
  },
  methods: {
    getDegreeImg(type, selected) {
      if (type === this.degreeOption[0].value) {
        return selected ? 'review-degree-satisfy-active' : 'review-degree-satisfy';
      }
      if (type === this.degreeOption[1].value) {
        return selected ? 'review-degree-unsatisfy-active' : 'review-degree-unsatisfy';
      }
    },
    getStar() {
      let evaluate = this.baseEvaluateInfo?.boliDegree || {};
      return evaluate || 5;
    }
  }
}
</script>
